const data = [
    { date: '10月1日', money: 1200 },
    { date: '10月2日', money: 500 },
    { date: '10月3日', money: 3200 },
    { date: '10月4日', money: 700 },
    { date: '10月5日', money: 4400 },
    { date: '10月6日', money: 2300 },
    { date: '10月7日', money: 3300 },
    { date: '10月8日', money: 3500 },
    { date: '10月9日', money: 2300 }
  ]

    // 封装函数
function canvas({el,type,width,height,data}){
    let cvs = document.querySelector(el)
    let ctx = cvs.getContext('2d')
    cvs.width = width
    cvs.height = height
    if(type === 'line'){
        ctx.translate(width*0.1,height*0.9)
        lineFn(0,0,width*0.8,0)
        lineFn(0,0,0,-height*0.8)
    }
    data.forEach((val,i)=>{
        lineFn(0,-50*i,)
    })
    function lineFn(x1,y1,x2,y2,color = 'black'){
        ctx.beginPath()
          ctx.moveTo(x1, y1)
          ctx.lineTo(x2, y2)
          ctx.strokeStyle = color
          ctx.stroke()
    }
    function textFn(text,x1,x2,){
        ctx.fillText(text,x1,y1)
        ctx.stroke()
    }
}
canvas({
    el:'.canvas1',
    width:1000,
    height:600,
    type:'line',
    data:data
})
